<template>
	<view class="mine">
		<view class="top">
			<uv-status-bar></uv-status-bar>
			<view class="avatar" @click="handleToUserInfo">
				<uv-avatar size="60" :src="userInfo.avatar_file && userInfo.avatar_file.url"></uv-avatar>
				<view class="info">
					<view class="name">{{ formatName }}</view>
					<view :class="['auth', userInfo.realNameAuth.errCode == 0 ? '' : 'active']" @click.stop="handleToAuth">
						<uv-image src="/static/images/auth.png" width="15" height="15"></uv-image>
						<view class="text">{{ userInfo.realNameAuth.errCode == 0 ? "未认证" : "已认证" }}</view>
					</view>
				</view>
			</view>
			<view class="statistics">
				<view class="item">
					<view class="count">0</view>
					<view class="text">总收入</view>
				</view>
				<view class="item">
					<view class="count">0</view>
					<view class="text">我的总订单</view>
				</view>
				<view class="item">
					<view class="count">0</view>
					<view class="text">本月收入</view>
				</view>
			</view>
			<view :class="['member-card', memberInfo.status == 1 ? 'active' : '']">
				<view class="member-top">
					<uv-image class="icon" src="/static/images/member.png" width="30" height="30"></uv-image>
					<view class="text">{{ memberInfo.status == 1 ? "会员" : "非会员" }}</view>
					<uv-button
						v-if="memberInfo.status != 1"
						text="去开通"
						shape="circle"
						@click="handleToMemberCenter"
					></uv-button>
				</view>
				<view class="line"></view>
				<view class="member-bottom">
					<view class="item">
						<uv-icon name="checkmark-circle" label="限金牌会员接单"></uv-icon>
					</view>
					<view class="item">
						<uv-icon name="checkmark-circle" label="享受益实时体现"></uv-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="cell">
				<uv-cell-group :border="false">
					<uv-cell label="会员" :icon="memberCellIcon" clickable isLink @click="handleToMemberCenter"></uv-cell>
					<uv-cell label="订单" :icon="orderCellIcon" clickable isLink @click="handleToOrder"></uv-cell>
					<uv-cell label="工种" :icon="jobTypeCellIcon" clickable isLink></uv-cell>
					<uv-cell label="我的钱包" :icon="walletCellIcon" clickable isLink @click="handleToWallet"></uv-cell>
				</uv-cell-group>
			</view>
			<view class="more">
				<view class="title">更多功能</view>
				<view class="grid">
					<view class="flex">
						<view class="item" @click="handleToSettings">
							<uv-icon :name="settingsGridIcon" size="20"></uv-icon>
							<view class="label">系统设置</view>
						</view>
						<view class="item" @click="handleToFeedback">
							<uv-icon :name="feedbackGridIcon" size="20"></uv-icon>
							<view class="label">投诉建议</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onReady } from "@dcloudio/uni-app";
import { useUserStore } from "@/store/user";
import { computed, ref } from "vue";
import memberCellIcon from "@/static/images/member-cell.png";
import orderCellIcon from "@/static/images/order-cell.png";
import jobTypeCellIcon from "@/static/images/job-type-cell.png";
import walletCellIcon from "@/static/images/wallet-cell.png";
import settingsGridIcon from "@/static/images/settings-grid.png";
import feedbackGridIcon from "@/static/images/feedback-grid.png";

const uniIdCo = uniCloud.importObject("uni-id-co");

const userStore = useUserStore();

const userInfo = ref(uni.getStorageSync("uni-id-pages-userInfo"));

const memberInfo = ref({
	// 0 未开通 1 生效中 2 已过期
	status: 0,
	// 订阅时间
	subscribe_date: "",
	// 订阅类型
	subscribe_type: 0,
	// 到期时间
	expiration_date: ""
});

const REAL_NAME_STATUS = {
	NOT_CERTIFIED: 0,
	WAITING_CERTIFIED: 1,
	CERTIFIED: 2,
	CERTIFY_FAILED: 3
};

const formatName = computed(() => {
	if (userInfo.value) {
		return userInfo.value.mobile
			? userInfo.value.mobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
			: userInfo.value.username;
	}
	return "未知用户";
});

// 获取会员信息
const handleGetMemberInfo = async (userId) => {
	const responsse = await uniIdCo.getMemberInfo({
		userId
	});
	if (responsse.errCode == 0 && responsse.member) {
		memberInfo.value = responsse.member;
	}
};

// 跳转个人中心
const handleToUserInfo = () => {
	uni.navigateTo({
		url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo"
	});
};

const handleToAuth = () => {
	uni.navigateTo({
		url: "/uni_modules/uni-id-pages/pages/userinfo/realname-verify/realname-verify"
	});
};

const handleToOrder = () => {
	uni.navigateTo({
		url: "/pages/order/order"
	});
};

// 跳转会员中心
const handleToMemberCenter = () => {
	uni.navigateTo({
		url: "/pages/member-center/member-center",
		animationType: "zoom-fade-out"
	});
};

// 跳转系统设置
const handleToSettings = () => {
	uni.navigateTo({
		url: "/pages/settings/settings"
	});
};

// 跳转投诉建议
const handleToFeedback = () => {
	uni.navigateTo({
		url: "/pages/opendb-feedback/add"
	});
};

const handleToWallet = () => {
	uni.navigateTo({
		url: "/pages/wallet/wallet"
	});
};

onReady(async () => {
	console.log(userInfo.value);
	const a = await uniIdCo.getRealNameInfo();
	console.log(a);
	handleGetMemberInfo(userInfo.value._id);
});
</script>

<style lang="scss" scoped>
.mine {
	height: 100%;
	display: flex;
	flex-direction: column;

	.top {
		background-image: linear-gradient(#f6d44c, #f6d44c, #ffffff);
		padding: 20px 20px 0;

		.avatar {
			display: flex;
			align-items: center;

			.info {
				margin-left: 10px;
				color: #ffffff;
				.name {
					font-size: 16px;
				}
				.auth {
					display: flex;
					align-items: center;
					padding: 3px 5px;
					border: solid 1px #ffffff;
					border-radius: 10px;
					margin-top: 5px;
					font-size: 10px;

					&.active {
						background-color: $uni-color-success;
						border: none;
					}

					.text {
						margin-left: 5px;
					}
				}
			}
		}

		.statistics {
			margin-top: 20px;
			padding: 0 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 14px;

			.item {
				text-align: center;
			}
		}

		.member-card {
			margin-top: 20px;
			background-image: linear-gradient(to right top, #ebeff4, #dce1ec);
			padding: 10px;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			filter: brightness(0.8);

			&.active {
				filter: none;
			}

			.member-top {
				display: flex;
				align-items: center;

				.text {
					flex: 1;
					font-size: 18px;
					margin-left: 10px;
					font-weight: bold;
				}
			}

			.line {
				margin: 5px 0;
				height: 2px;
				background-color: #d2d8e4;
			}

			.member-bottom {
				margin-top: 20px;
				padding: 0 10px 20px;
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.content {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding: 20px;
		box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
		flex: 1;
		background-image: linear-gradient(#ffffff, #f7f7f7);

		.more {
			.title {
				font-size: 18px;
				font-weight: bold;
				margin: 20px 0;
			}

			.grid {
				border-radius: 10px;
				padding: 10px;
				box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);

				.flex {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
					margin-bottom: 10px;

					&:last-child {
						margin-bottom: 0px;
					}

					.item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 10px;
						border-radius: 10px;
						box-sizing: border-box;
						margin-right: 10px;

						&:last-child {
							margin-right: 0px;
						}

						&:active {
							box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
						}

						.label {
							margin-top: 5px;
							font-size: 10px;
							color: #595c72;
						}
					}
				}
			}
		}
	}
}
</style>
